<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./../../yl/index.css" />
  <title>人员信息</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* 容器布局 */
    #app {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .title {
      padding: 15px;
      background: #fff;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      z-index: 1;
    }

    .body {
      flex: 1;
      display: flex;
      gap: 20px;
      padding: 15px;
      overflow: hidden;
    }

    /* 左侧导航 */
    .left {
      padding: 1%;
      flex: 0 0 280px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      overflow: auto;
    }

    /* 右侧主内容 */
    .right {
      padding: 1%;
      flex: 1;
      min-width: 300px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
    }

    /* 响应式处理 */
    @media (max-width: 768px) {
      .body {
        flex-direction: column;
        padding: 10px;
      }

      .left {
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: 15px;
      }

      .el-table {
        max-height: 50vh;
      }
    }

    /* 表格容器 */
    .table-container {
      flex: 1;
      overflow: hidden;
      position: relative;
    }

    .el-table {
      height: 100% !important;
    }

    /* 分页样式 */
    .el-pagination {
      padding: 12px;
      background: #fff;
      border-top: 1px solid #eee;
    }

    .button {
      margin-left: 1%;
      min-width: 96px;
      height: 32px;
      background: #fff;
      border: 1px solid #d31805;
      border-radius: 16px;
      color: #d31805;
      cursor: pointer;
      outline: none;
    }

    .zdtype {
      background: #d31805;
      color: #fff;
      margin: 1%;
      width: 10%;
    }

    :deep(.el-select__wrapper) {
      align-items: normal;
    }

    .custom-dialog {
      padding: 20px;

      .dialog-header {
        text-align: center;
        padding: 15px 0;

        span {
          font-size: 18px;
          font-weight: bold;
          color: #333;
        }
      }

      .dialog-content {
        padding: 0px 50px;

        .full-width-checkbox {
          display: block;
          padding-left: 2%;
          font-weight: bold;
          color: #333;
        }

        .checkbox-columns {
          display: flex;

          .checkbox-column {
            width: 48%;

            .custom-checkbox {
              display: block;
              margin: 8px 0;
              padding: 5px 10px;
              border-radius: 4px;
              transition: all 0.3s;

              &:hover {
                background-color: #f5f5f5;
              }
            }
          }
        }
      }

      .dialog-footer {
        text-align: center;
        padding: 15px 0;

        .cancel-btn {
          width: 100px;
          background: #f5f5f5;
          color: #666;
          border: none;

          &:hover {
            background: #e6e6e6;
          }
        }

        .confirm-btn {
          width: 100px;
          background: #d31805;
          border: none;

          &:hover {
            background: #b31505;
          }
        }
      }
    }

    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- <div>
        <el-button circle>
          <Edit style="width:15px;height:15px;margin-right:5px;vertical-align:middle;fill:#d31805"/>
        </el-button>
       
      </div> -->
    <div class="title">
      <div style="margin-bottom: 1%;">
        总人数{{ totalMembers }}人（正式党员{{ fullMembers }}人，预备党员{{
        probationaryMembers }}人）
      </div>
      <div>
        名称：<el-input v-model="input" style="width: 200px" placeholder="请输入内容"></el-input>
        政治面貌：
        <el-select v-model="value" placeholder="请选择" style="width: 200px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="danger" style="margin-left: 1%;" @click="check">查询</el-button>
        <el-button style="width: 60px" @click="reset">重置</el-button>
        <button class="button" @click="personalAdd">添加</button>
        <!-- <button class="button">批量导入/更新</button>
        <button class="button">批量删除</button>
        <button class="button">批量导出</button> -->
      </div>
    </div>
    <div class="body">
      <div class="left">
        <el-tree ref="tree" style="max-width: 600px" :data="treeData" @node-click="handleNodeClick"
          :props="{ label: 'Province' }" />
        <template #default="{ node, data }">
          <div class="custom-tree-node">
            <span>{{ node.label }}</span>
            <div>
              <el-button type="primary" link @click="personalAdds(data)">
                +
              </el-button>
              <el-button type="primary" link @click="handleEdits(data)">
                编辑
              </el-button>
              <el-button style="margin-left: 4px" type="danger" link @click="remove(node, data)">
                删除
              </el-button>
            </div>
          </div>
        </template>
      </div>
      <div class="right">
        <el-button class="zdtype" @click="handleOpenDialog">设置显示字段</el-button>
        <el-table height="450" v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="Tabletdata"
          @selection-change="handleSelectionChange">
          <el-table-column width="180" v-for="column in columns" :key="column.COLUMN_NAME" :prop="column.COLUMN_NAME"
            :label="column.COLUMN_COMMENT">
            <template #scope="scope">
              <div :draggable="true" @dragstart="dragStart(scope.$index)" class="draggable-row">
                {{ scope.row[column.prop] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" min-width="132">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                编辑
              </el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 1%;" :current-page="currentPage" :page-size="pageSize"
          :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="Total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <el-dialog v-model="showDialog" width="550" class="custom-dialog">
      <template #header>
        <div class="dialog-header">
          <span>设置显示字段</span>
        </div>
      </template>
      <div class="dialog-content">
        <el-checkbox v-model="isAllChecked" @change="handleAllChecked" class="full-width-checkbox">全选</el-checkbox>
        <div class="checkbox-columns">
          <el-checkbox-group v-model="checkedFields" style="width: 100%; display: flex; flex-wrap: wrap">
            <el-checkbox :disabled="field.COLUMN_KEY === 'PRI'" v-for="field in fields" :key="field" :value="field"
              style="width: 50%; height: 30px; margin-right: 0px">
              {{ field.COLUMN_COMMENT }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="saveFields" class="confirm-btn">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  </div>
  <script src="../../utils/utils.js"></script>
  <script src="../../config/config.js"></script>
  <script src="../../yl/vue.js"></script>
  <script src="../../yl/index.js"></script>
  <script src="https://app.unpkg.com/element-plus@2.9.7/files/es/locale/lang/zh-cn.mjs"></script>
  <script src="../../yl/index.iife.min.js"></script>
  <script src="../../yl/jquery.min.js"></script>
<script src="../../utils/jquery.cookie.js"></script>
  <script src="../../api/request.js"></script>
  <script src="./js/grid_event.js"></script>
</body>

</html>